<template>
  <div class="add-black-name-box">
    <el-dialog
      :title="'添加黑名单'"
      :visible.sync="dialogVisible"
      width="800px"
      class="dialog-box"
      :modal-append-to-body='false'
    >
      <div>
        <div class="list">
          <div class="label">类型</div>
          <el-radio-group v-model="radioVal">
            <el-radio
              v-for="(item, index) in inputList"
              :key="index"
              :label="item.type"
              @change="radioChange"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </div>

        <div class="list">
          <div class="label">账号：</div>
          <el-input
            style="width: 240px"
            v-model="dialogKeyword"
            placeholder="请先输入账号进行查询"
            @input="numberChange"
            clearable
          ></el-input>
          <el-button
            type="primary"
            class="btn"
            style="margin-left: 20px"
            @click="findMessage"
            >查询</el-button
          >
          <div
            class="user-name"
            v-if="infoMessage"
            :style="{
              color: infoMessage.aboutInfoEntryVoList.length <= 0 ? 'red' : '#67C23A',
            }"
          >
            <i
              :class="
                infoMessage.aboutInfoEntryVoList.length <= 0
                  ? 'el-icon-circle-close'
                  : 'el-icon-circle-check'
              "
            ></i>
            <div>{{ infoMessage.desc }}</div>
          </div>
        </div>

        <div class="list" v-if="radioVal === 4" style="margin-bottom: 50px">
          <div class="label">关联信息：</div>
          <div class="link-mes">
            <!-- <div v-if="!infoMessage">请先输入账号进行查询</div> -->
            <div v-if="infoMessage  && infoMessage.aboutInfoEntryVoList.length > 0" style="color: #c0c4cc; margin-bottom: 10px">
              如勾选手机号/身份证/微信，将封禁其关联的趣ID
            </div>
            <div class="link-table" v-if="infoMessage && infoMessage.aboutInfoEntryVoList.length > 0">
              <div
                class="link-list"
                v-for="(item, index) in infoMessage.aboutInfoEntryVoList"
                :key="index"
              >
                <div class="number-name">{{ item.key }}</div>
                <div class="check-item" @click.stop="getCheckboxIndex(index)">
                  <el-checkbox
                    v-model="item.checkAll"
                    @change="handleCheckAllChangeIndex"
                    >全选</el-checkbox
                  >
                  <div style="margin-right: 10px"></div>
                  <el-checkbox-group
                    v-model="checkItem[index]"
                    @change="checkboxChangeIndex"
                  >
                    <el-checkbox
                      v-for="(item, idx) in item.values"
                      :key="idx"
                      :label="item"
                      >{{ item.number }} {{ item.desc }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <div v-else>无</div>
          </div>
        </div>

        <div class="list" v-if="radioVal !== 4" style="margin-bottom: 50px">
          <div class="label">关联趣ID：</div>
          <div class="quid-list" v-if="infoMessage && infoMessage.aboutInfoEntryVoList.length > 0">
            <el-checkbox-group v-model="checkQuIds" @change="checkboxChangeQQ">
              <el-checkbox
                v-for="(item, idx) in infoMessage.aboutInfoEntryVoList[0].values"
                :disabled="item.disabled"
                :key="idx"
                :label="item"
                >{{ item.number }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div v-else>无</div>
        </div>

        <div class="list">
          <div class="label" style="width: 86px">封禁权限：</div>
          <div class="f-list">
            <el-checkbox
              v-if="radioVal === 4"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >完全封禁</el-checkbox
            >
            <div v-if="radioVal === 4" style="margin: 15px 0"></div>
            <el-checkbox-group
              v-model="checkListModal"
              @change="checkboxChange"
            >
              <el-checkbox
                v-for="(item, idx) in checkList"
                :key="idx"
                :label="item"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="list" style="margin-bottom: 50px">
          <div class="label" style="width: 86px">封禁至：</div>
          <div>
            <el-date-picker
              v-model="fjDate"
              value-format="timestamp"
              align="left"
              type="date"
              :picker-options="pickerOptions"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="list">
          <div class="label">封禁原因：</div>
          <el-input
            type="textarea"
            maxlength="200"
            rows="3"
            show-word-limit
            v-model.trim="remark"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setAuditStatus"
          >提交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-button
      type="danger"
      class="btn"
      @click="addBlackName(1)"
      >添加黑名单</el-button
    >
  </div>
</template>

<script>
import { formatDate } from "@/utils/utils";

export default {
  name: "AddBlackName",
  data() {
    return {
      checkList: [
        '禁止出售',
        '禁止出租',
        '禁止买号',
        '禁止租号',
        '冻结钱包'
      ],
      checkListModal: [],
      checkArr: [],
      radioVal: 4,
      inputList: [
        {
          name: "趣ID",
          placeholder: "请输入趣ID",
          value: "",
          checked: false,
          type: 4,
        },
        {
          name: "QQ号",
          placeholder: "请输入QQ号",
          value: "",
          checked: false,
          type: 1,
        },
        {
          name: "手机号",
          placeholder: "请输入手机号",
          value: "",
          checked: false,
          type: 3,
        },
        {
          name: "身份证号",
          placeholder: "请输入身份证号",
          value: "",
          checked: false,
          type: 2,
        },
        {
          name: "微信号",
          placeholder: "请输入微信号",
          value: "",
          checked: false,
          type: 5,
        },
      ],
      dialogVisible: false,
      fjDate: "",
      startTime: "",
      remark: "",
      infoMessage: null,
      dialogKeyword: "",
      checkboxIndex: 0,
      checkItem: {
        0: [],
        1: [],
        2: [],
        3: [],
      },
      checkQuIds: [],
      checkQQAll: false,
      cancelId: null,
      cancelMessage: [],
      cancelPword: "",
      checkAllFlag: false,
      checkAll: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        },
        shortcuts: [
          {
            text: '一周',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }, {
          text: '一个月',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
            picker.$emit('pick', date)
          }
        }, {
          text: '三个月',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 90)
            picker.$emit('pick', date)
          }
        }, {
          text: '六个月',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 180)
            picker.$emit('pick', date)
          }
        }, {
          text: '一年',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 365)
            picker.$emit('pick', date)
          }
        }, {
          text: '永久',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 365 * 100)
            picker.$emit('pick', date)
          }
        }]
      },
    };
  },

  props: {
    sourceType: {
      default: 0,
      type: Number
    },
    userId: {
      type: Number
    }
  },

  watch: {
    dialogVisible: {
      handler(val) {
        this.fjDate = "";
        this.startTime = "";
        this.remark = "";
        this.checkListModal = [];
        this.infoMessage = null;
        this.dialogKeyword = this.userId
      },
      immediate: true
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    // QQ号，微信号等
    handleCheckAllChangeQQ(val) {
      this.checkQuIds = val
        ? this.infoMessage.aboutInfoEntryVoList[0].values
        : [];
    },
    // 选中复选框
    checkboxChangeQQ(val) {
      this.checkQuIds = val;
      let checkedCount = val.length;
      let arr = this.infoMessage.aboutInfoEntryVoList[0].values;
      this.checkQQAll = checkedCount === arr.length;
    },
    // 关联用户
    async findMessage() {
      if (!this.dialogKeyword) {
        return this.$message({ type: "error", message: "请输入账号进行查询" });
      }
      let params = {
        keyWord: this.dialogKeyword,
        type: this.radioVal,
      };
      let res = await this.$http.post("/black/selectAboutInfo", params);
      if (res.code === "0") {
        this.infoMessage = res.data;
        this.infoMessage.aboutInfoEntryVoList.length &&
          this.infoMessage.aboutInfoEntryVoList.forEach((item) => {
            this.$set(item, "checkAll", false);
          });
        // 如果选择的是 手机号 身份证 微信号  则默认选中 所关联的趣ID
        if ([2, 3, 5].includes(this.radioVal) && this.infoMessage.aboutInfoEntryVoList.length > 0) {
          this.checkQuIds = this.infoMessage.aboutInfoEntryVoList[0].values;
          this.infoMessage.aboutInfoEntryVoList[0].values.forEach((item) => {
            this.$set(item, 'disabled', true)
          })
        }
      } else {
        this.$message({
          type: "error",
          message: res.desc || "系统繁忙，请稍后再试",
        });
      }
    },

    // 选择趣ID 下的列表复选框
    getCheckboxIndex(index) {
      this.checkboxIndex = index;
    },
    // 选择趣ID 下的列表复选框
    handleCheckAllChangeIndex(val) {
      let arr = this.infoMessage.aboutInfoEntryVoList[this.checkboxIndex]
        .values;
      this.checkItem[this.checkboxIndex] = val ? arr : [];
    },
    // 选择趣ID 下的列表复选框
    checkboxChangeIndex(val) {
      let checkedCount = val.length;
      let arr = this.infoMessage.aboutInfoEntryVoList[this.checkboxIndex]
        .values;
      this.infoMessage.aboutInfoEntryVoList[
        this.checkboxIndex
      ].checkAll = false;
      if (checkedCount === arr.length) {
        this.infoMessage.aboutInfoEntryVoList[
          this.checkboxIndex
        ].checkAll = true;
      }
    },
    // 选择类型
    radioChange(val) {
      this.radioVal = val;
      // 如果是趣ID,在个人中心则默认填写ID
      if (val === 4) {
        this.dialogKeyword = this.userId
      } else {
        this.dialogKeyword = "";
      }
      this.infoMessage = null;
      this.fjDate = "";
      this.startTime = "";
      this.remark = "";
      this.checkListModal = [];
      this.checkAll = false
      if (val === 1) {
        this.checkList = ["禁止出售", "禁止出租"];
      } else if (val === 4) {
        this.checkList = [
          "禁止出售",
          "禁止买号",
          "禁止出租",
          "禁止租号",
          "冻结钱包",
        ];
      } else {
        this.checkList = [
          "禁止出售",
          "禁止买号",
          "禁止出租",
          "禁止租号"
        ];
      }
    },
    // 查询账号 key
    numberChange(type) {
      this.dialogKeyword = type;
    },
    // 添加黑名单
    addBlackName() {
      this.dialogVisible = true;
      this.fjDate = "";
      this.startTime = "";
      this.remark = "";
      this.checkListModal = [];
      this.infoMessage = null;
    },
    handleCheckAllChange(val) {
      this.checkListModal = val ? this.checkList : [];
      if (!val) {
        if (this.checkListModal.includes("完全封禁")) {
          this.checkListModal.splice(this.checkListModal.indexOf("完全封禁"), 1);
        }
      }
    },
    // 选中复选框
    checkboxChange(val) {
      this.checkListModal = val;
      this.checkAll = false
      if (this.checkListModal.includes("完全封禁")) {
        this.checkListModal.splice(this.checkListModal.indexOf("完全封禁"), 1);
      }
    },
    // 计算封禁能力
    getLimitParams() {
      let obj = {
        '冻结钱包': {
          name: "冻结钱包",
          status: 1,
          type: "limitWallet",
        },
        '禁止出售': {
          name: "禁止出售",
          status: 1,
          type: "limitDeal",
        },
        '禁止出租': {
          name: "禁止出租",
          status: 1,
          type: "limitTrade",
        },
        '禁止买号': {
          name: "禁止买号",
          status: 1,
          type: "limitGet",
        },
        '禁止租号': {
          name: "禁止租号",
          status: 1,
          type: "limitRent",
        },
        '完全封禁': {
          name: "完全封禁",
          status: 1,
          type: "allLimit",
        },
        '冻结钱包': {
          name: "冻结钱包",
          status: 1,
          type: "limitWallet",
        },
      };
      let paramsArr = [];
      this.checkListModal.forEach((item) => {
        if (obj[item]) {
          paramsArr.push(obj[item]);
        }
      });
      // 只有 趣Id 才有完全封禁
      if (this.checkAll && this.radioVal === 4) {
        // if (!this.checkListModal.includes("完全封禁")) {
        //   this.checkListModal.push("完全封禁");
        // }
        paramsArr.push({
          name: "完全封禁",
          status: 1,
          type: "allLimit",
        });
      }
      return paramsArr;
    },

    // 获取关联信息内容参数
    getAboutInfoEntryVoListParams() {
      let arr = [];
      if (this.radioVal === 4) {
        arr = [
          {
            key: "手机号",
            values: this.checkItem[0],
          },
          {
            key: "身份证",
            values: this.checkItem[1],
          },
          {
            key: "微信",
            values: this.checkItem[2],
          },
          {
            key: "QQ号",
            values: this.checkItem[3],
          },
        ];
      } else {
        arr = [
          {
            key: "关联趣Id",
            values: this.checkQuIds,
          },
        ];
      }

      return arr;
    },
    // 添加/编辑黑名单 api
    setAuditStatus() {
      let url = "/black/addTradeAccountBlack";
      this.dialogVisible = true;
      let params = {
        remark: this.remark,
        endTime: this.fjDate,
        sourceType: this.sourceType || 0, //黑名单来源
        aboutInfoEntryVoList: this.getAboutInfoEntryVoListParams() || [],
        tradeAccountBlackContentList: [
          {
            type: this.radioVal,
            number: this.dialogKeyword,
          },
        ],
        tradeAccountBlackLimitList: this.getLimitParams() || [], // 封禁能力
      };

      if (params.tradeAccountBlackLimitList.length <= 0) {
        return this.$message({ type: "error", message: "请选择封禁能力" });
      }
      if (!this.fjDate)
        return this.$message({ type: "error", message: "请选择封禁日期" });

      if (!this.remark) {
        return this.$message({ type: "error", message: "请填写封禁原因" });
      }

      this.$http.post(url, params).then((res) => {
        if (res.code === "0") {
          this.dialogVisible = false;
          this.remark = "";
          // 添加完成恢复成之前的
          this.radioChange(4);
          this.$emit('updateList', 1, 'reset', this.radioVal)
        } else {
          this.$message({
            type: "error",
            message: res.desc,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.add-black-name-box {
}
.link-table {
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  .link-list {
    border-bottom: 1px solid #DCDFE6;
    padding: 0px 6px;
    display: flex;
    justify-content: flex-start;
    .number-name {
      padding: 4px 0px;
      border-right: 1px solid #DCDFE6;
      min-width: 60px;
    }
    .check-item {
      padding: 4px 10px;
      display: flex;
    }
  }
  .link-list:last-child {
    border: none;
  }
}
.list {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  .user-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    i {
      margin-right: 8px;
      margin-left: 8px;
    }
  }
  .label {
    width: 100px;
  }
}
/deep/ .el-checkbox .el-checkbox__input .el-checkbox__inner {
  background-color: #ccc !important;
}
</style>
